<template>
  <!-- 租金付款时间 -->
  <div>
    <el-row>
      <el-col :span="12">
        <el-select
          :disabled="readonly"
          v-model="chooseData"
          :placeholder="$t('请选择')"
          @change="changeRentPay"
          value-key="code"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-input
          :disabled="readonly"
          @change="changeData"
          v-model="checkedData"
        >
          <span slot="append">{{ $t('个自然日') }}</span>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'rentPayTime',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      checkedData: '',
      readonly: false,
      chooseData: 1,
      selecData: { value: 1, label: this.$t('计费周期开始前') },
      options: [
        { value: 1, label: this.$t('计费周期开始前') },
        { value: 2, label: this.$t('计费周期结束后') },
      ],

      rules: {
        checkedData: [
          {
            required:
              this.parameter.state === 4 || this.parameter.inputFlag === 1,
            validator: (rule, value, callback) => {
              if (
                this.checkedData &&
                !/^(0|[1-9][0-9]{0,1})$/.test(this.checkedData)
              ) {
                callback(new Error(this.$t('最大支持2位整数')))
                return
              }
              if (
                !this.checkedData &&
                (this.parameter.state === 4 || this.parameter.inputFlag === 1)
              ) {
                callback(new Error(this.$t('请输入')))
                return
              } else {
                callback()
                return
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.$emit('setrules', this.parameter, {
      [this.parameter.parameterNumber]: this.rules.checkedData,
    })
    this.readonly = Boolean(this.$route.query.readonly)
    if (this.value) {
      this.setData()
    }
  },
  methods: {
    changeRentPay(val) {
      this.selecData = (this.options || []).find((it) => it.value == val) || {}
    },
    changeData() {
      this.$emit('input', String(this.checkedData))
    },
    setData() {
      this.selectData = JSON.parse(this.value).value
      this.chooseData = this.selectData.value || 1
      this.checkedData = JSON.parse(this.value).checkedData
    },
    getData() {
      return {
        value: this.selecData,
        checkedData: this.checkedData,
      }
    },
  },
}
</script>
